<template>
  <div class="login-container">
    <div class="logo-form-box">
      <nut-form :model-value="formData" ref="ruleForm">
        <nut-form-item
          prop="phone"
          :rules="[{ required: true, message: '请填写用户名' }]"
        >
          <nut-input
            class="nut-input-text"
            v-model="formData.phone"
            placeholder="手机号"
            type="text"
          >
            <template #left>
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="zhanghao"
                size="18"
                color="#15181d"
              ></IconFont>
            </template>
          </nut-input>
        </nut-form-item>
        <nut-form-item
          prop="password"
          :rules="[{ required: true, message: '请填写密码' }]"
        >
          <nut-input
            class="nut-input-text"
            v-model="formData.password"
            placeholder="请输入密码"
            :type="passwordVisible1 ? 'text' : 'password'"
          >
            <template #left>
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="mima"
                size="18"
                color="#15181d"
              ></IconFont>
            </template>
            <template #right>
              <IconFont
                name="eye"
                size="10"
                v-if="passwordVisible1"
                @click="passwordVisible1 = !passwordVisible1"
              ></IconFont>
              <IconFont
                size="10"
                name="marshalling"
                v-else
                @click="passwordVisible1 = !passwordVisible1"
              ></IconFont>
              >
            </template>
          </nut-input>
        </nut-form-item>
        <nut-form-item
          prop="confirmPassword"
          :rules="[{ required: true, message: '请填写确认密码' }]"
        >
          <nut-input
            class="nut-input-text"
            v-model="formData.confirmPassword"
            placeholder="请再次输入密码"
            :type="passwordVisible2 ? 'text' : 'password'"
          >
            <template #left>
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="mima"
                size="18"
                color="#15181d"
              ></IconFont>
            </template>
            <template #right>
              <IconFont
                name="eye"
                size="10"
                v-if="passwordVisible2"
                @click="passwordVisible2 = !passwordVisible2"
              ></IconFont>
              <IconFont
                size="10"
                name="marshalling"
                v-else
                @click="passwordVisible2 = !passwordVisible2"
              ></IconFont>
              >
            </template>
          </nut-input>
        </nut-form-item>
        <nut-form-item
          prop="yzmCode"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <nut-input
            class="nut-input-text"
            v-model.trim="formData.yzmCode"
            placeholder="请填写验证码"
            type="number"
          >
            <template #left>
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="yanzhengyanzhengma"
                size="18"
                color="#15181d"
              ></IconFont>
            </template>
            <template #right>
              <nut-button
                v-if="!yzData.countDownIng"
                :disabled="!formatPhoneInput()"
                size="mini"
                color="linear-gradient(to right, #5232B7,#7237BC)"
                @click="getCodeYZM"
                style="font-size: 8px"
                type="danger"
                >验证码</nut-button
              >
              <div
                style="font-size: 14px; color: #5232b7"
                v-if="yzData.countDownIng"
              >
                {{ yzData.countDownTime }}s
              </div>
              >
            </template>
          </nut-input>
        </nut-form-item>
      </nut-form>
      <div class="login-btn">
        <nut-button
          color="linear-gradient(to right, #5232B7,#7237BC)"
          block
          style="margin-right: 10px"
          @click="submit"
          >重置密码
        </nut-button>
      </div>
      <div class="tip-container">
        <div class="tip2" @click="login">去登录</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { storeToRefs } from "pinia";
import { useUserStore } from "../../store";
import * as loginApi from "../../api/loginApi";
const userStore = useUserStore();
const { registerCode } = storeToRefs(userStore);
// 表单数据
const formData = reactive({
  phone: "",
  password: "",
  confirmPassword: "",
  yzmCode: "",
});
//验证码数据
const yzData = reactive({
  countDownTime: 60,
  timer: null,
  countDownIng: false,
});
//验证手机号格式
const formatPhoneInput = computed(() => {
  return () => {
    const re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
    const result = re.test(formData.phone);
    if (!result) {
      return false;
    }
    return true;
  };
});
//模板渲染完成
onMounted(() => {
  let sendEndTime = localStorage.getItem("startTimeLogin-dp");
  if (sendEndTime) {
    yzData.countDownIng = true;
    countDown();
  }
});
const passwordVisible1 = ref(false); // 显示密码1
const passwordVisible2 = ref(false);// 显示密码2
const ruleForm = ref(null);
//提交
const submit = () => {
  ruleForm.value.validate().then(async ({ valid, errors }) => {
    if (valid) {
      if (formData.password !== formData.confirmPassword) {
        Taro.showToast({
          title: "两次密码不一致",
          icon: "none",
        });
        return;
      }
      let data = {
        userName: formData.phone,
        smsCode: formData.yzmCode,
        userPassword: formData.password,
        confirmPassword: formData.password,
        userType: "Consume",
      };

      const res = await loginApi.ResetPass(data);
      if (res.state == 200) {
        Taro.showToast({
          title: "重置成功",
        });
        formData.confirmPassword = "";
        formData.password = "";
        formData.phone = "";
        formData.yzmCode = "";
        setTimeout(() => {
          Taro.redirectTo({
            url: "/pages/login/index",
          });
        }, 1000);
      } else {
        Taro.showToast({
          title: res.message,
          icon: "none",
        });
      }
    } else {
      console.log("error submit!!", errors);
    }
  });
};
const login = () => {
  Taro.navigateBack();
};
// 校验手机号
const getCodeYZM = async () => {
  const res = await loginApi.ResetYzm({
    userName: formData.phone,
    userType: "2",
  });
  if (res.state == 200) {
    countDown();
  } else {
    Taro.showToast({
      title: res.message,
      icon: "none",
      duration: 2000,
    });
  }
};
//获取验证码倒计时 存储内存
const countDown = () => {
  let startTime = localStorage.getItem("startTimeLogin-dp");
  let nowTime = new Date().getTime();
  if (startTime) {
    let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
    yzData.countDownTime = surplus <= 0 ? 0 : surplus;
  } else {
    yzData.countDownTime = 60;
    localStorage.setItem("startTimeLogin-dp", nowTime);
  }
  yzData.timer = setInterval(() => {
    yzData.countDownTime--;
    yzData.getCodeDisabled = true;
    yzData.countDownIng = true;
    if (yzData.countDownTime <= 0) {
      localStorage.removeItem("startTimeLogin-dp");
      clearInterval(yzData.timer);
      yzData.countDownTime = 60;
      yzData.countDownIng = false;
    }
  }, 1000);
};
</script>
<style lang="less">
.login-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px 10px;
  .tip-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    .tip1 {
      color: #858a99;
    }
    .tip2 {
      //   color: #15181d;
      color: #5232b7;
      margin-left: 10px;
    }
  }
  .logo-form-box {
    .login-btn {
      padding: 20px;
    }
  }
}
</style>
